<template>
  <el-form label-width="80px">
    <div class="field-card-title" >
      <el-button @click="addArray" size="small">添加</el-button>
    </div>
    <div class="field-card-body" v-for="(item,index) in  array" :key="index">
      <el-card>
        <div slot="header" class="field-card-body-t"  >
          <el-link type="danger" icon="el-icon-delete" :underline="false" @click="delArray(index)"></el-link>
        </div>
        <el-form label-position="left">
          <el-form-item label="键">
            <el-input v-model="item.value"></el-input>
          </el-form-item>
          <el-form-item label="值">
            <el-input v-model="item.label"></el-input>
          </el-form-item>
        </el-form>

      </el-card>
    </div>
  </el-form>
</template>

<script>
function getUuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 5) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return "b" + v.toString(5).replace(/-/ig, "");
  });
}
export default {
  name: "parse-array-object",
  props:{
    array:{
      type:Array
    },

  },

  methods:{
    addArray(){
      this.array.push({
        value:getUuid(),
        label:""
      })
    },
    delArray(index){
      this.array.splice(index,1)
    }
  }
}
</script>

<style scoped>
.field-card-title{
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
}
.field-card-body{
  margin-bottom: 8px;
}
.field-card-body-t{
  display: flex;
  justify-content: flex-end;
}
</style>
